<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-button :disabled="roles === '学生'" type="primary" icon="el-icon-plus" @click="addDialog">新增</el-button>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="form.college" placeholder="请选择学院">
          <el-option v-for="college in collegeList" :key="college" :label="college" :value="college" />
        </el-select>
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="form.profession" placeholder="请选择专业">
          <el-option v-for="profession in professionList" :key="profession" :label="profession" :value="profession" />
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名" >
        <el-input v-model="form.studentName" placeholder="请输入学生姓名"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getStudentList()">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        type="index"
        align="center"
        label="序号"
        width="100"/>
      <el-table-column
        prop="studentName"
        label="姓名"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentGender"
        label="性别"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentPhone"
        label="联系方式"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentCollegeName"
        label="所属学院"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentProfession"
        label="专业"
        align="center"
        width="140"/>
      <el-table-column
        prop="studentGrade"
        label="年级"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentClass"
        label="班级"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentDormitoryBuildName"
        label="所属宿舍楼(栋)"
        align="center"
        width="120"/>
      <el-table-column
        prop="studentDormitoryNo"
        label="宿舍编号"
        align="center"
        width="120"/>
      <el-table-column
        prop="checkInTime"
        label="入住时间"
        align="center"
        width="150"/>
      <el-table-column
        prop="departureTime"
        label="离住时间"
        align="center"
        width="150"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="170">
        <template slot-scope="scope">
          <el-button :disabled="roles === '学生'" type="primary" size="small" icon="el-icon-edit" @click="handleClick(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="您确定要删除吗？"
            @confirm="deleteStudent(scope.row.studentId)"
          >
            <el-button slot="reference" :disabled="roles === '学生'" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-sizes="[5,10,20,50]"
      :page-size="pageSize"
      :current-page="pageNo"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
    <!--    编辑对话框-->
    <el-dialog
      :visible.sync="updateDialogVisible"
      :before-close="handleClose"
      :title="updateTitle"
      width="400px"
    >
      <el-form :model="updateForm">
        <el-form-item label="联系方式" style="margin-left: 35px">
          <el-input v-model="updateForm.studentPhone" placeholder="请输入学生联系方式" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="学院" style="margin-left: 35px">
          <el-select v-model="updateForm.studentCollegeName" placeholder="请选择学院" style="margin-left: 27px;width: 200px">
            <el-option v-for="college in collegeList" :key="college" :label="college" :value="college" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" style="margin-left: 35px">
          <el-select v-model="updateForm.studentProfession" placeholder="请选择专业" style="margin-left: 27px;width: 200px">
            <el-option v-for="profession in professionList" :key="profession" :value="profession" :label="profession" />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" style="margin-left: 35px" >
          <el-select v-model="updateForm.studentGrade" placeholder="请选择年级" style="width: 200px;margin-left: 27px">
            <el-option v-for="grade in gradeList" :key="grade" :value="grade" :label="grade" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级" style="margin-left: 35px" >
          <el-input v-model="updateForm.studentClass" placeholder="请输入班级" style="width: 200px;margin-left: 27px"/>
        </el-form-item>
        <el-form-item label="宿舍楼" style="margin-left: 35px">
          <el-select v-model="updateForm.studentDormitoryBuildName" placeholder="请选择宿舍楼" style="margin-left: 14px;width: 200px">
            <el-option v-for="build in buildList" :key="build" :label="build" :value="build"/>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍编号" style="margin-left: 35px">
          <el-input v-model="updateForm.studentDormitoryNo" placeholder="请输入学生入住宿舍编号" style="width: 200px"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStudent">确 定</el-button>
      </span>
    </el-dialog>
    <!--    新增对话框-->
    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      direction="rtl"
      title="新增学生信息">
      <el-form :model="addForm">
        <el-form-item label="姓名" style="margin-left: 50px">
          <el-input v-model="addForm.studentName" placeholder="请输入学生姓名" style="width: 250px;margin-left: 42px"/>
        </el-form-item>
        <el-form-item label="性别" style="margin-left: 50px">
          <el-select v-model="addForm.studentGender" placeholder="请选择学生性别" style="width: 250px;margin-left: 42px">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" style="margin-left: 50px">
          <el-input v-model="addForm.studentPhone" placeholder="请输入电话号码" style="width: 250px;margin-left: 42px"/>
        </el-form-item>
        <el-form-item label="学院" style="margin-left: 50px">
          <el-select v-model="addForm.college" placeholder="请选择学院" style="margin-left: 42px;width: 250px">
            <el-option v-for="college in collegeList" :key="college" :label="college" :value="college"/>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" style="margin-left: 50px">
          <el-select v-model="addForm.studentProfession" placeholder="请选择专业" style="width: 250px;margin-left: 42px">
            <el-option v-for="profession in professionList" :key="profession" :label="profession" :value="profession" />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" style="margin-left: 50px">
          <el-select v-model="addForm.studentGrade" placeholder="请选择年级" style="width: 250px;margin-left: 42px">
            <el-option v-for="grade in gradeList" :key="grade" :label="grade" :value="grade" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级" style="margin-left: 50px">
          <el-input v-model="addForm.studentClass" placeholder="请输入班级" style="width: 250px;margin-left: 42px"/>
        </el-form-item>
        <el-form-item label="宿舍楼" style="margin-left: 50px">
          <el-select v-model="addForm.studentDormitoryBuildName" placeholder="请选择宿舍楼" style="width: 250px;margin-left: 28px">
            <el-option v-for="build in buildList" :key="build" :label="build" :value="build" />
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍编号" style="margin-left: 50px">
          <el-input v-model="addForm.studentDormitoryNo" placeholder="请输入宿舍编号" style="width: 250px;margin-left: 14px"/>
        </el-form-item>
        <el-form-item style="margin-left: 140px">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button type="primary" size="small" style="margin-left: 120px" @click="addStudent">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import BuildApi from '../../api/build'
import CollegeApi from '../../api/college'
import ProfessionApi from '../../api/profession'
import StudentApi from '../../api/student'
import { mapGetters } from 'vuex'
export default {
  name: 'Student',
  data() {
    return {
      tableData: [],
      pageNo: 1,
      pageSize: 5,
      total: 0,
      loading: true,
      form: {
        college: '',
        profession: '',
        studentName: ''
      },
      addForm: {},
      updateForm: {},
      buildList: [],
      collegeList: [],
      professionList: [],
      gradeList: ['大一', '大二', '大三', '大四'],
      updateDialogVisible: false,
      drawer: false,
      updateTitle: ''
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.getCollegeList()
    this.getBuildList()
    this.getProfessionList()
    this.getStudentList(1)
  },
  methods: {
    handleClick(row) {
      this.updateTitle = '修改' + row.studentName + '的信息'
      this.updateDialogVisible = true
      this.updateForm = row
      this.updateForm.studentDormitoryBuildName = this.updateForm.studentDormitoryBuildName.slice(0, 2)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStudentList()
    },
    handleCurrentChange(val) {
      this.getStudentList(val)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    addDialog() {
      this.drawer = true
    },
    cancel() {
      this.drawer = false
    },
    // 重置表单
    resetForm() {
      this.form.college = ''
      this.form.profession = ''
      this.form.studentName = ''
    },
    // 获取学生分页列表
    getStudentList(page = 1) {
      this.pageNo = page
      StudentApi.getStudentList(this.pageNo, this.pageSize, this.form).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.tableData.forEach((student) => {
          student.studentDormitoryBuildName += '栋'
          student.checkInTime = new Date(student.checkInTime).toLocaleString()
          if (student.departureTime == null) {
            student.departureTime = '至今'
          } else {
            student.departureTime = new Date(student.departureTime).toLocaleString()
          }
          this.loading = false
        })
      })
    },
    // 添加学生信息
    addStudent() {
      StudentApi.addStudent(this.addForm).then(response => {
        this.$message.success('添加成功！')
        this.getStudentList(1)
      })
    },
    // 更新学生信息
    updateStudent() {
      StudentApi.updateStudent(this.updateForm.studentId, this.updateForm).then(response => {
        this.updateDialogVisible = false
        this.$notify({
          title: '成功',
          message: '这是一条更新学生信息成功的提示消息',
          type: 'success'
        })
        this.getStudentList(1)
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '这是一条更新学生信息错误的提示消息'
        })
      })
    },
    // 删除学生信息
    deleteStudent(studentId) {
      StudentApi.deleteStudent(studentId).then(response => {
        this.$notify({
          title: '成功',
          message: '这是一条删除学生信息成功的提示消息',
          type: 'success'
        })
        this.getStudentList(1)
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '这是一条删除学生信息错误的提示消息'
        })
      })
    },
    // 获取建筑列表
    getBuildList() {
      BuildApi.getBuildNameList().then(response => {
        this.buildList = response.data
      })
    },
    // 获取学院列表
    getCollegeList() {
      CollegeApi.getCollegeList().then(response => {
        this.collegeList = response.data
      })
    },
    // 获取专业列表
    getProfessionList() {
      ProfessionApi.getProfessionNameList().then(response => {
        this.professionList = response.data
      })
    }
  }
}
</script>
<style>

</style>
